<!DOCTYPE html>
<html lang="ch">

	<head>
		<meta charset="utf-8" />
		<title>百度前端</title>
		<link rel="stylesheet" href="css/a2.css" />
		<style>

		</style>
		<script>
		</script>
	</head>
	<!--
	作者：819115696@qq.com
	时间：2016-06-21
	描述：
-->

	<body>
		<div id="layer">
			<div id="layer1">
				
				<img src="img/a1/图像 1.png" />
				<nav>
					<ul>
						<li><a href="#">导航连接一</a></li>
						<li><a href="#">导航连接二</a></li>
						<li><a href="#">导航连接三</a></li>
						<li><a href="#">导航连接四</a></li>
					</ul>
				</nav>

			</div>
			<div id="layer2">
				<div class="passage">
					<h2 class="headline1">文章一级标题</h2>
					<h2 class="headline2">文章二级标题</h2>
					<div class="headline3">文章作者 文章发表时间</div>

					<p>这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,换行了<br />这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,<a href="http://ife.baidu.com">这里有一个连接连接到http://ife.baidu.com</a>这是一个很长的段落,这是一个很长的段落,<b>这里有个粗体字</b>这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,----</p>
					<div><img src="img/a1/CCP3Q5M`(N2DJ6_W$J9VTXQ.png" /></div>
					<p>
						这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,换行了--
						<br />是一个很长的段落,这是一个很长的段落,这是一个很长的段落,是一个很长的段落,这是一个很长的段落,这是一个很长的段落,是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,是一个很长的段落,这是一个很长的段落,这是一个很长的段落,是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,<a href="http://ife.baidu.com" target="_blank">这里有个连接,打开新窗口到百度</a>
					</p>
				</div>
				<div class="passage">
					<h2 class="headline1">这是另一篇文章的一级标题</h2>
					<h3 class="headline2">这是以另一篇文章的二级标题</h3>
					<div class="headline3">文章作者 文章发表时间</div>
					<p>这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,换行了<br />这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,换行了<br />
						<a href="http://ife.baidu.com">这里有一个连接连接到http://ife.baidu.com</a>这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,
						<div>
							<img src="img/CCP3Q5M`(N2DJ6_W$J9VTXQ.png" />
							<ul>
								<li>列表项目一</li>
								<li>列表项目二</li>
								<li>列表项目三</li>
							</ul>
						</div>
					</p>
				</div>
				<div class="passage">
					<dl>
						<dt><h3>图片</h3></dt>
						<dd>
							<div>
								<p>好看的图片</p><img src="img/a1/CCP3Q5M`(N2DJ6_W$J9VTXQ.png" alt="这是图片" /></div>
							<div>
								<p>好看的图片</p><img src="img/a1/CCP3Q5M`(N2DJ6_W$J9VTXQ.png" alt="这是图片" /></div>
							<div>
								<p>好看的图片</p><img src="img/a1/CCP3Q5M`(N2DJ6_W$J9VTXQ.png" alt="这是图片" /></div>
							<div>
								<p>好看的图片</p><img src="img/a1/CCP3Q5M`(N2DJ6_W$J9VTXQ.png" alt="这是图片" /></div>
							<div>
								<p>好看的图片</p><img src="img/a1/CCP3Q5M`(N2DJ6_W$J9VTXQ.png" alt="这是图片" /></div>
							<div>
								<p>好看的图片</p><img src="img/a1/CCP3Q5M`(N2DJ6_W$J9VTXQ.png" alt="这是图片" /></div>
							<div>
								<p>好看的图片</p><img src="img/a1/CCP3Q5M`(N2DJ6_W$J9VTXQ.png" alt="这是图片" /></div>
							<div>
								<p>好看的图片</p><img src="img/a1/CCP3Q5M`(N2DJ6_W$J9VTXQ.png" alt="这是图片" /></div>
						</dd>
					</dl>
				</div>
				<div class="passage">
					<h2 class="headline1">最后一篇文章一级标题</h2>
					<h2 class="headline2">文章二级标题</h2>
					<div class="headline3">文章作者 文章发表时间</div>
					<ol>
						<li>排名1</li>
						<li>排名2</li>
						<li>排名3</li>
					</ol>
					<div>下面是一个表格,给表格增加了一个border="1"好让你看出是一个表格</div>
					<table border="1">
						<th>表头</th>
						<th>表头</th>
						<th>表头</th>
						<tr>
							<td>表内容单元格</td>
							<td>表内容单元格</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr>
							<td>表内容单元格</td>
							<td>表内容单元格</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr>
							<td>表内容单元格</td>
							<td>表内容单元格</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr>
							<td>表内容单元格</td>
							<td>表内容单元格</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr>
							<td>总计</td>
							<td colspan="2">1000</td>
						</tr>
					</table>
				</div>
				<br />
			</div>
			<div id="layer3" class="passage">
				<h2 class="headline4">这里以后是一个侧栏,这是侧栏的标题</h2>
				<form>
					<div class="from-details">
						<div>
							<div>请输入邮箱地址&nbsp;&nbsp; <input placeholder="这是一个文本输入框" type="text"></div>
							<div class="hint">邮箱地址请按要求输入</div>
						</div>
						<div>
							<div>
								请输入密码&nbsp;&nbsp; <input type="password"></div>
							<div>
								请重复输入密码&nbsp;&nbsp; <input type="password"></div>
							<div class="hint">密码为16位英文数字</div>
						</div>
						<div class="hobby">
							<div id="">
								性别&nbsp;&nbsp;&nbsp;
								<input type="radio" name="xingbie" value="男" /> 男
								<input type="radio" name="xingbie" value="女" />女
							</div>
							<div>
								城市&nbsp;&nbsp;&nbsp;
								<select>
						         <option value="beijing">北京</option>
						         <option value="beijing">北京</option>
						         <option value="beijing">北京</option>
					            </select>
							</div>
							<div>
								爱好&nbsp;&nbsp;&nbsp;
								<input type="checkbox" name="运动" />运动           
								<input type="checkbox" value="艺术" />艺术
								<input type="checkbox" value="科学" />科学
							</div>
						</div>

					</div>
					<div class="from-person">
						<span style="">个人描述&nbsp;&nbsp;&nbsp;</span><textarea rows="3" cols="20"  placeholder="这是一个多行输入框,请输入您的描述"></textarea>
					</div>
					<input class="bt-submit" type="submit" value="确认提交" />

				</form>
			</div>
			<div id="layer4">
				版权所有 &copy;
			</div>
		</div>

	</body>

</html>